<ion-header class="nav-header">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="backClick()">
        <ion-icon class="md-arrow-back" ios="md-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>在线充值</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngIf="isShow" class="card-money-msg">
    <div class="card-money-msg-bg">
      <img src="assets/img/wallet_card_bg.png" />
    </div>
    <ion-card-content>
      <ion-card-title style="color: #fff; margin: 0px 20px 20px; display: flex; align-items: center;"><span style="font-size: 14px; margin-right: 20px;">充值金额</span><span style="font-size: 20px;">¥{{cardMsg.amount}}</span></ion-card-title>
      <div class="timer-out">{{cardMsg.first_pre}}<span [attr.data-time]="cardMsg.timeout"
          class="t">{{timer(cardMsg.timeout)}}</span>{{cardMsg.first_post}}</div>
      <div class="note">附言:<span class="n">{{cardMsg.note}}</span>
        <ion-button style="font-size: 13px; height: 25px;width: 30px;" shape="round" (click)="copyText(cardMsg.note)">复制
        </ion-button>
      </div>
    </ion-card-content>

  </ion-card>
  <ion-list *ngIf="isShow" style="margin: 0px 18px;" class="card-list-msg">
    <div class="tit-msg">
      <p style="margin-bottom: 10px; font-size: 16px;">收款账户信息</p>
    </div>
    <ion-item>
      <ion-icon class="iconfont ion-ios-yinlian" style="font-size: 38px; color: #004f9c;" slot="start"></ion-icon>
      <ion-label>{{cardMsg.bankflag | bankname}}</ion-label>
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont ion-ios-yonghu" style="font-size: 34px; color: #004f9c;" slot="start"></ion-icon>
      <ion-label>{{cardMsg.cardname}}</ion-label>
      <ion-button shape="round" slot="end" (click)="copyText(cardMsg.cardname)">复制</ion-button>
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont ion-ios-yinhangqiahao" style="font-size: 34px; color: #004f9c;" slot="start"></ion-icon>
      <ion-label style="font-size: 12px;">{{cardMsg.cardnumber}}</ion-label>
      <ion-button shape="round" slot="end" (click)="copyText(cardMsg.cardnumber)">复制</ion-button>
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont ion-ios-dingwei" style="font-size: 34px; color: #004f9c;" slot="start"></ion-icon>
      <ion-label>{{cardMsg.location}}</ion-label>
      <ion-button shape="round" slot="end" (click)="copyText(cardMsg.location)">复制</ion-button>
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont ion-ios-chongzhidingdanhao" style="font-size: 34px; color: #004f9c;" slot="start">
      </ion-icon>
      <ion-label>{{cardMsg.order_no}}</ion-label>
      <ion-button shape="round" slot="end" (click)="copyText(cardMsg.order_no)">复制</ion-button>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="isShow" style="margin: 0px 18px;" class="card-list-msg">
    <div class="tit-msg">
      <p style="margin-bottom: 10px; font-size: 16px;">持卡人信息</p>
    </div>
    <ion-item>
      <ion-icon class="iconfont ion-ios-yinlian" style="font-size: 38px; color: #004f9c;" slot="start"></ion-icon>
      <ion-label>{{cardMsg.account_bankname  }}</ion-label>
    </ion-item>
    <ion-item *ngIf="!(cardMsg.account_name |empty)">    
      <ion-icon class="iconfont ion-ios-yonghu" style="font-size: 38px; color: #004f9c;" slot="start"></ion-icon>
      <ion-label>{{cardMsg.account_name}}</ion-label>
    </ion-item>
  </ion-list>
  <ion-card *ngIf="isShow" style="box-shadow: none; border: 1px solid #E8E9EC;">
    <ion-card-content>
      <div class="notice-msg">
        <p style="margin-bottom: 10px; font-size: 14px;">
          <ion-icon class="iconfont ion-ios-tishi" style="color: #eb3c5e; font-weight: bold;" slot="start"></ion-icon>温馨提示
        </p>
        <div class="n-msg" [innerHTML]="cardMsg.notice | html"></div>
      </div>
    </ion-card-content>
  </ion-card>


  <ion-card *ngIf="!isShow">
    <ion-card-header>
      <ion-card-subtitle>{{errorMsg}}</ion-card-subtitle>
    </ion-card-header>
  </ion-card>
</ion-content>